import { connect } from "dva";
import styles from "./index.less";
import { Tabs, Calendar } from "antd-mobile";
import selectDate from "../../assets/slect-date@3x.png";
import circleImg from "../../assets/icon-usercenter-back@3x.png";
import customerImg1 from "../../assets/customerImg1.jpg";
import customerImg2 from "../../assets/customerImg2.jpg";
import customerImg3 from "../../assets/customerImg3.jpg";
import customerImg4 from "../../assets/customerImg4.jpg";
import customerImg5 from "../../assets/customerImg5.jpg";
import customerImg6 from "../../assets/customerImg6.jpg";
import customerImg7 from "../../assets/customerImg7.jpg";
import customerImg8 from "../../assets/customerImg8.jpg";
import customerImg9 from "../../assets/customerImg9.jpg";

function App({ myRanking, dispatch }) {
  const tabs = [
    { title: "推广排名" },
    { title: "引流排名" },
    { title: "转化排名" }
  ];
  const { calendarVisible } = myRanking;
  const onCancel = () => {
    dispatch({
      type: "myRanking/onCalendar",
      payload: {
        calendarVisible: false
      }
    });
  };
  const onConfirm = () => {
    console.log("onConfirm");
  };
  const onSelectHasDisableDate = () => {
    console.log("onSelectHasDisableDate");
  };
  const getDateExtra = () => {
    console.log("getDateExtra");
  };
  const now = new Date();
  const showCalendar = () => {
    dispatch({
      type: "myRanking/onCalendar",
      payload: {
        calendarVisible: true
      }
    });
  };
  return (
    <div className={styles.normal}>
      <Calendar
        visible={calendarVisible}
        onCancel={onCancel}
        onConfirm={onConfirm}
        onSelectHasDisableDate={onSelectHasDisableDate}
        getDateExtra={getDateExtra}
        defaultDate={now}
        minDate={new Date(+now - 5184000000)}
        maxDate={new Date(+now + 31536000000)}
      />
      <div className={styles.dateItem} onClick={showCalendar}>
        <span>排名日期</span>
        <span>2018年08月-2018年09月</span>
        <img className={styles.selectDate} src={selectDate} />
      </div>
      <Tabs
        tabs={tabs}
        initalPage={0}
        tabBarActiveTextColor="#FD5527"
        tabBarInactiveTextColor="#333333"
        tabBarTextStyle={{
          fontSize: ".28rem"
        }}
        tabBarUnderlineStyle={{
          width: "20%",
          marginLeft: ".38rem",
          borderColor: "#FD5527",
          backgroundColor: "#FD5527",
          flexDirection:'row',
          justifyContent:'center',
          alignItems:'center'
        }}
      >
        <div>
          <div className={styles.largeItem}>
            <div className={styles.personInfo}>
              <img className={styles.customerImg} src={customerImg1} />
              <div>
                <span className={styles.personName}>Takamaru Ayako</span>
                <span className={styles.generalizeTimes}>推广次数：377次</span>
              </div>
            </div>
            <div className={styles.rankingNumTip}>
              <span>第5名</span>
            </div>
          </div>
          <div className={styles.rankingList}>
            <div className={styles.rankingItem}>
              <div className={styles.personInfo}>
                <img className={styles.customerImg} src={customerImg2} />
                <div>
                  <span className={styles.personName}>Boris Ukhtomsky</span>
                  <span className={styles.generalizeTimes}>
                    推广次数：377次
                  </span>
                </div>
              </div>
              <div className={styles.rankingNumRed}>
                <span>1</span>
              </div>
            </div>
            <div className={styles.rankingItem}>
              <div className={styles.personInfo}>
                <img className={styles.customerImg} src={customerImg3} />
                <div>
                  <span className={styles.personName}>Ea Tipene</span>
                  <span className={styles.generalizeTimes}>
                    推广次数：377次
                  </span>
                </div>
              </div>
              <div className={styles.rankingNumRed}>
                <span>2</span>
              </div>
            </div>
            <div className={styles.rankingItem}>
              <div className={styles.personInfo}>
                <img className={styles.customerImg} src={customerImg4} />
                <div>
                  <span className={styles.personName}>张三</span>
                  <span className={styles.generalizeTimes}>
                    推广次数：377次
                  </span>
                </div>
              </div>
              <div className={styles.rankingNumRed}>
                <span>3</span>
              </div>
            </div>
            <div className={styles.rankingItem}>
              <div className={styles.personInfo}>
                <img className={styles.customerImg} src={customerImg5} />
                <div>
                  <span className={styles.personName}>Olivia Evans</span>
                  <span className={styles.generalizeTimes}>
                    推广次数：377次
                  </span>
                </div>
              </div>
              <div className={styles.rankingNumOther}>
                <span>第4名</span>
              </div>
            </div>
            <div className={styles.rankingItem}>
              <div className={styles.personInfo}>
                <img className={styles.customerImg} src={customerImg6} />
                <div>
                  <span className={styles.personName}>Takamaru Ayako</span>
                  <span className={styles.generalizeTimes}>
                    推广次数：377次
                  </span>
                </div>
              </div>
              <div className={styles.rankingNumOther}>
                <span>第5名</span>
              </div>
            </div>
            <div className={styles.rankingItem}>
              <div className={styles.personInfo}>
                <img className={styles.customerImg} src={customerImg7} />
                <div>
                  <span className={styles.personName}>Xu Xuefeng</span>
                  <span className={styles.generalizeTimes}>
                    推广次数：377次
                  </span>
                </div>
              </div>
              <div className={styles.rankingNumOther}>
                <span>第6名</span>
              </div>
            </div>
            <div className={styles.rankingItem}>
              <div className={styles.personInfo}>
                <img className={styles.customerImg} src={customerImg8} />
                <div>
                  <span className={styles.personName}>Boris Ukhtomsky</span>
                  <span className={styles.generalizeTimes}>
                    推广次数：377次
                  </span>
                </div>
              </div>
              <div className={styles.rankingNumOther}>
                <span>第7名</span>
              </div>
            </div>
            <div className={styles.rankingItem}>
              <div className={styles.personInfo}>
                <img className={styles.customerImg} src={customerImg9} />
                <div>
                  <span className={styles.personName}>Boris Ukhtomsky</span>
                  <span className={styles.generalizeTimes}>
                    推广次数：377次
                  </span>
                </div>
              </div>
              <div className={styles.rankingNumOther}>
                <span>第8名</span>
              </div>
            </div>
          </div>
        </div>
      </Tabs>
      {/*<div className={styles.rankingTip}>*/}
      {/*<div className={styles.selectedType}>*/}
      {/*<span>推广排名</span>*/}
      {/*</div>*/}
      {/*<div className={styles.rankingType}>*/}
      {/*<span>引流排名</span>*/}
      {/*</div>*/}
      {/*<div className={styles.rankingType}>*/}
      {/*<span>转化排名</span>*/}
      {/*</div>*/}
      {/*</div>*/}
    </div>
  );
}
export default connect(({ myRanking }) => ({ myRanking }))(App);
